{% extends "base.html" %}

{% block content %}
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl p-6">
    <div class="text-center mb-6">
        <h1 class="text-2xl font-bold">好友默契度测试</h1>
        <p class="text-gray-600" id="progress">问题 1 / {{ questions|length }}</p>
    </div>

    <div id="questions-container">
        {% for question in questions %}
        <div class="question-card {% if not loop.first %}hidden{% endif %}" data-question-id="{{ question.id }}">
            <h2 class="text-xl mb-4">{{ question.question }}</h2>
            <div class="space-y-3">
                <input type="text" 
                       class="w-full p-3 rounded border border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
                       placeholder="请输入你的答案"
                       onchange="saveAnswer(this)">
            </div>
        </div>
        {% endfor %}
    </div>

    <div class="mt-6 text-center">
        <button id="next-btn" 
                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
                onclick="nextQuestion()">
            下一题
        </button>
        <button id="submit-btn" 
                class="hidden bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
                onclick="submitAnswers()">
            提交答案
        </button>
    </div>
</div>
{% endblock %} 